<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html" charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.min.js"></script>

</head>
<body>
<!--第一次调用组件-->
    <div id="app">
        <model1></model1>
    </div>

<!--第二次调用组件-->
<div id="app1">
    <model1></model1>
</div>

        <script type="text/javascript">
            //封装全局组件，model1是自定义组件的名称，全局组件注册后可以重复使用
            Vue.component("model1",{
                //模板，自定义组件的html内容
                template:"<div><h1>{{title}}</h1><button type='button' @click='ddfn'>葵花点穴手</button></div>",
                //数据
                data:function () {
                    return{
                        title:"hello Vue组件"
                    }
                },
                //方法函数
                methods:{
                    ddfn:function () {
                        this.title="没点到......再来一次"
                    }
                }
            });

            //创建vue对象，绑定ID叫做app的元素内容
            //绑定vue对象后，组件才能使用
            new Vue({
                el:"#app"
            });

            new Vue({
                el:"#app1"
            });


        </script>

</body>
</html>